<template>
  <div id="map"></div>
</template>

<script>
import Vue from "vue";
export default {
  mounted() {
    /* 实现地图的初始  */
    var gaode_vector = new ol.layer.Tile({
      title: "高德地图-矢量图层",
      source: new ol.source.XYZ({
        url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}",
        wrapX: false,
      }),
      // visible: false
    });
    var gaode_image = new ol.layer.Tile({
      title: "高德地图-影像图层",
      source: new ol.source.XYZ({
        url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=6&x={x}&y={y}&z={z}",
        wrapX: false,
      }),
    });
    const map = new ol.Map({
      target: "map",
      /* 设置地图图层 */
      layers: [gaode_image, gaode_vector],
      /* view设置地图 以坐标,中心点,放大级别 */
      view: new ol.View({
        center: [114.3, 30.5],
        zoom: 4,
        //经纬度坐标系
        projection: "EPSG:4326",
      }),
    });
    /* 将地图挂载到全局 */
    Vue.prototype.$map = map;
  },
};
</script>

<style scoped>
#map {
  width: 100vw;
  height: 100vh;
}
</style>
